<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>lazy</title>
    <style type="text/css">
        ul,li{
            list-style: none;
        }
        .container{
            width: 600px;
            margin: 0 auto;
        }
        .container li{
            float: left;
            margin: 10px 10px;
        }
        .container li img{
            width: 240px;
            height: 180px;
        }
    </style>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
    <ul class="container">
        <li><a href="#"><img src="images/img0.jpg" data-src="images/img1.jpg"></a></li>
        <li><a href="#"><img src="images/img0.jpg" data-src="images/img2.jpg"></a></li>
        <li><a href="#"><img src="images/img0.jpg" data-src="images/img3.jpg"></a></li>
        <li><a href="#"><img src="images/img0.jpg" data-src="images/img4.jpg"></a></li>
        <li><a href="#"><img src="images/img0.jpg" data-src="images/img5.jpg"></a></li>
        <li><a href="#"><img src="images/img0.jpg" data-src="images/img6.jpg"></a></li>
        <li><a href="#"><img src="images/img0.jpg" data-src="images/img7.jpg"></a></li>
        <li><a href="#"><img src="images/img0.jpg" data-src="images/img8.jpg"></a></li>
        <li><a href="#"><img src="images/img0.jpg" data-src="images/img9.jpg"></a></li>
        <li><a href="#"><img src="images/img0.jpg" data-src="images/img10.jpg"></a></li>
        <li><a href="#"><img src="images/img0.jpg" data-src="images/img11.jpg"></a></li>
        <li><a href="#"><img src="images/img0.jpg" data-src="images/img12.jpg"></a></li>
        <li><a href="#"><img src="images/img0.jpg" data-src="images/img13.jpg"></a></li>
        <li><a href="#"><img src="images/img0.jpg" data-src="images/img14.jpg"></a></li>

    </ul>
    <script>


        $(".container img").each(function () {
            if(checkShow($(this)) && !isLoaded($(this))){
                loadImg($(this))
            }
        })

        $(window).on("scroll",function () {
            $(".container img").each(function () {
                if(checkShow($(this)) && !isLoaded($(this))){
                    loadImg($(this))
                }
            })
        })

        function checkShow($img) {
            var scrollTop = $(window).scrollTop()
            var windowHeight = $(window).height()
            var offsetTop = $img.offset().top
            if(offsetTop > scrollTop && offsetTop < scrollTop+windowHeight){
                return true
            }
            return false
        }

        function isLoaded($img) {
            return $img.attr("src") === $img.attr("data-src")
        }

        function loadImg($img) {
            $img.attr("src",$img.attr("data-src"))
        }
    </script>
</body>
</html>